<template>
  <div class="swiper-wapper">
    <portal-detail
      v-show="showPage"
    />
    <swiper
      ref="swiper"
      v-show="!showPage&&swiperSlides.length"
      :options="swiperOption"
      class="swiper"
    >
      <div
        slot="pagination"
        v-show="tabSilde&&swiperSlides.length!=1"
        class="swiper-pagination"
      />
      <swiper-slide
        v-for="(slide, index) in swiperSlides"
        :key="index"
        :id="'mhpage'+slide.mhId"
        class="swiperItem"
      >
        <!--暂时用插件代替，等页面完成在用插槽，目的是方便切换不同页面，整理成不同模板-->
        <template v-if="activeMh==slide.mhId">
          <main-page
            :mhId="slide.mhId"
            @showPage="showDetail"
          />
        </template>
      </swiper-slide>
    </swiper>
    <p
      v-if="showNomh"
      class="noMh"
    >
      <img
        src="./assets/images/je-nodata.png"
        alt=""
        srcset=""
      >
      <span>暂时没有门户信息，请前往<a
        @click="nomhFunc"
        href="javascript:;"
      >门户定义</a>设置</span>
    </p>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import mainPage from './page/mainPage/index';
import { fetchPageData } from './common/portal';
import portalDetail from './components/portalDetail';
import { EventBus } from './common/eventBus';
import { COMMON } from './common/params';

export default {
  name: 'Partal',
  components: {
    swiper, swiperSlide, mainPage, portalDetail,
  },
  data() {
    return {
      activeMh: '',
      swiperOption: {
        // autoHeight: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        threshold: 100,
        on: {
          slideChange: () => {
          // 你的事件
          // 获取当前
            const { swiper } = this.$refs.swiper;
            this.activeMh = this.swiperSlides[swiper.activeIndex].mhId;
          },
        },
      },
      swiperSlides: [],
      swiperCon: [],
      showPage: false,
      tabSilde: true,
      showNomh: false,
    };
  },
  mounted() {
    EventBus.$on(COMMON.CLOSEPAGE, (target) => {
      this.showPage = !this.showPage;
      // 响应此处时，页面同一个新闻要刷新数据、
      // 传过去是newsId
      EventBus.$emit(COMMON.BACKFROMDETAIL, target);
      // 执行页面上的点赞，阅读数量，阅读状态，评论数量更改
    });
    EventBus.$on(COMMON.NEWSDEATIL, () => {
      this.showPage = !this.showPage;
    });
    EventBus.$on(COMMON.SCROLHIDE, (target) => {
      this.tabSilde = target;
    });
    // 人员头像处理
    const me = this;
    if (JE.isEmpty(JE.__USERS__)) {
      $(document).on('mysubscrible', () => {
        me.getpage();
      });
    } else {
      me.getpage();
    }
  },
  methods: {
    async getpage() {
      // 此处接口请求的是拿到所有门户页面
      const data = await fetchPageData();
      this.swiperSlides = data;
      if (this.swiperSlides.length) {
        this.activeMh = this.swiperSlides[0].mhId;
      } else {
        this.showNomh = true;
      }
    },
    nomhFunc() {
      const that = this;
      JE.showFunc('JE_MHXW_MH', {
        callback(panel) {
          const win = panel.up('window');
          win.on('close', () => {
            JE.confirm('确定刷新数据吗', async (btn) => {
              if (btn == 'ok') {
                that.getpage();
              }
            });
          });
        },
      });
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" >
@import './assets/css/swiper.css';
.swiper-wapper{
  background: url('assets/images/swiperBanner.png') center 100%;
  background-size: cover;
  -webkit-background-size: cover;
  /* height: 100%; */
  .noMh{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin: -150px 0 0 -250px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #999;
    img{
      width: 150px;
      margin: 0 auto;
    }
    span{text-align:center;}
  }
}
.swiper-container{
  height:100%;
}
  .swiper-pagination-bullet {
    display: inline-block;
    margin: 0 20px 0 0;
    position: relative;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
    border-radius: 34px;
    width: 30px;
    height: 5px;
    opacity: 1;
  }
  .swiperItem{
    display: flex;
  }
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
    color: #fff;
    background: #007aff;
    opacity: .7;
  }
  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
    top:30px!important;
    height:24px;
  }
</style>
